<template>
    <div class="topic">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                offset="150"
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                immediate-check
                class="topic-list"
            >
                <div
                    class="list-item"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="toTopicDetail(item.id)"
                >
                    <img :src="item.scene_pic_url" alt="">
                    <p class="title">{{item.title}}</p>
                    <p class="subtitle">{{item.subtitle}}</p>
                    <p class="price">{{item.price_info}}元起</p>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { getTopicInfo } from '@/api/topic/index'

export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            index: 1
        };
    },
    methods: {
        onLoad() {
            if (this.refreshing) {
                this.list = [];
                this.refreshing = false;
            }
            // 请求数据
            getTopicInfo({page: this.index++})
            .then( res => {
                this.list = [...this.list, ...res.data];
                console.log(this.list);
                this.loading = false;
            } )
            // 列表加载完成标识
            if (this.index == 5) {
                this.finished = true;
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        // 跳转到专题详情
        toTopicDetail(id) {
            this.$router.push({ name: 'topicDetail', query: {id,} })
        }
    },
};
</script>

<style lang="scss" scoped>
    .topic-list{
        background: #f4f4f4;
        .list-item{
            width: 100%;
            height: 330px;
            margin-bottom: 8px;
            background: #fff;
            text-align: center;
            img{
                width: 100%;
                height: 207.5px;
            }
            .title{
                font-size: .46667rem;
            }
            .subtitle{
                color: #999;
                font-size: .32rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 10px
            }
            .price{
                color: #b4282d;
                font-size: .36rem;
            }
        }
    }

</style>
